<template>
	<u-datetime-picker
				v-bind="$attrs"
				ref="datetimePicker"
				:show="show"
				v-model="modelValue"
				:mode="mode"
				@cancel="closePicker"
				@confirm="confirmPicker"
				itemHeight="60"
				visibleItemCount="6"
				:minDate="minDate"
	></u-datetime-picker>
</template>

<script setup>
	import {watch, ref} from 'vue'
	import dayjs from 'dayjs';
	
	const modelValue = ref(dayjs().valueOf());
	const datetimePicker = ref(null);
	// 向父组件暴露ref
	defineExpose({
		datetimePicker,
	})
	const props = defineProps({
	    show:{ type:Boolean, default:false}, 
	    minDate:{ type:Number, default:Number(new Date('1900-01-01'))}, 
	    mode:{ type:String, default:'date'},
			defaultVal: {type:String},
			format: {type: String, default: 'YYYY-MM-DD'}
	})

	watch(() => props.defaultVal, (val) => {
		modelValue.value = dayjs(defaultVal).valueOf()
	})
	
	const emit = defineEmits(['close-picker','confirm-picker'])
	// 关闭
	const closePicker = ()=>{
		 emit('close-picker',false);
	}
	// 确定
	const confirmPicker = (val)=>{
		 emit('confirm-picker',dayjs(val.value).format(props.format));
	}
	 
	
</script>

<style>
</style>
